<template>
  <div>
    <el-card>
      <el-row type="flex" justify="end">
        <el-button
          type="primary"
          @click="addEmployeeFn"
        >添加员工</el-button>
      </el-row>
<el-divider></el-divider>
      <!-- 表格组件 -->
      <el-table :data="employeesList" border style="width: 100%">
        <el-table-column prop="username" label="用户名" width="380" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button type="primary" @click="assignFn(row.id)">设置角色</el-button>
            <el-button type="warning" @click="editFn(row.id)">编辑</el-button>
            <el-button type="danger" @click="delFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 完整功能的分页组件 -->
      <el-row
        type="flex"
        justify="center"
        align="middle"
        style="height: 60px"
      >
        <el-pagination
          layout="total,sizes,prev, pager, next,jumper"
          :total="employeesTotal"
          :page-size="size"
          :page-sizes="[5,10,15,20]"
          :current-page="page"
          @current-change="currentChangeFn"
          @size-change="sizeChangeFn"
        />
      </el-row>
    </el-card>

    <!-- 添加员工和编辑员工弹框组件 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" @close="closeFn">
      <el-form ref="form" :model="employeeForm" label-width="120px" :rules="rules">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="employeeForm.username" placeholder="请输入1~6位字符" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="employeeForm.password" placeholder="请输入6-10位字符" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="employeeForm.email" placeholder="请输入一个合法的邮箱地址" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeFn">取 消</el-button>
        <el-button
          type="primary"
          @click="comfirmFn"
        >确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分配角色弹框组件 -->
    <assignRole ref="roleForm" :dialog-role.sync="dialogRole" :user-id="userId" />

  </div>

</template>

<script>
import { employeesList, employeeCount, deleteEmployee, employeeDatail, editEmployee } from '@/api/employees'
import { registered } from '@/api/user'
import assignRole from './components/assign-role.vue'
export default {
  components: {
    assignRole
  },
  data() {
    const validateEmail = (rules, value, callback) => {
      const reg = /^\w+@\w{2,}[.]\w{2,4}$/
      if (reg.test(value)) {
        return callback()
      } else {
        callback(new Error('请输入一个合法的邮箱地址'))
      }
    }
    return {
      userId: 0, // 分配角色的员工id
      dialogRole: false, // 分配角色弹框
      employeesList: [], // 员工列表
      employeesTotal: null, // 员工数量
      page: 1, // 第1页
      size: 5, // 每页获取条数
      title: '', // 弹框名称
      dialogVisible: false,
      employeeForm: {
        username: '',
        email: '',
        password: ''
      },
      rules: {
        username: [{ required: true, message: '姓名不能为空', trigger: 'blur' },
          { min: 1, max: 6, message: '1~6位字符', trigger: 'blur' }],
        email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' },
          { validator: validateEmail, trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 10, message: '6~10位字符', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getEmployeesList()
  },
  methods: {
    // 封装获取员工列表和数量
    async  getEmployeesList() {
      // 获取员工列表
      const start = (this.page - 1) * this.size
      this.employeesList = await employeesList({
        _limit: this.size, // 每页获取条数
        _start: start
      })
      //   console.log('员工列表', this.employeesList)

      // 获取员工数量
      this.employeesTotal = await employeeCount()
    //   console.log('员工数量', this.employeesTotal)
    },

    // 点击页码跳转
    currentChangeFn(page) {
      this.page = page
      this.getEmployeesList()
    },

    // 每页请求数量改变
    sizeChangeFn(size) {
    //   console.log(82, size)
      this.size = size
      this.page = 1
      this.getEmployeesList()
    },

    // 点击添加员工按钮
    addEmployeeFn() {
      this.title = '添加员工'
      this.dialogVisible = true
    },

    // 分配角色
    assignFn(id) {
      this.dialogRole = true
      // console.log('分配角色', id)
      // console.log(this.$refs.roleForm)
      this.$refs.roleForm.getRolecheckList(id)
      this.userId = id
    },

    // 编辑员工
    async  editFn(id) {
      this.title = '编辑员工'
      this.dialogVisible = true
      // 数据回显
      this.employeeForm = await employeeDatail(id)
      // console.log('数据回显', this.employeeForm)
    },
    // 删除员工
    delFn(id) {
      // 2次确认
      this.$confirm('此操作将永久删除该员工, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteEmployee(id)
        this.$message({
          type: 'success',
          message: '删除成功!' })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 弹框.............................................................
    // 关闭弹框
    closeFn() {
      this.dialogVisible = false
      // 清空数据
      this.employeeForm = {
        username: '',
        password: '',
        email: ''
      }
      // 清空验证
      this.$refs.form.resetFields()
    },

    // 确定按钮
    async comfirmFn() {
      try {
        // 表单验证
        await this.$refs.form.validate()
        // console.log(this.employeeForm)
        if (this.employeeForm.id) {
          await editEmployee(this.employeeForm)
        } else {
          // 添加员工接口
          await registered(this.employeeForm)
        }

        // 关闭弹窗
        this.closeFn()
        // 更新列表数据
        this.getEmployeesList()
      } catch (err) {
        // this.$message.warning(err)
        console.log(err)
      }
    }
  }
}
</script>

<style>

</style>
